// 导入table
import { Table, Card, Button } from "antd";

import { useEffect, useState } from "react";
// 安装antd的时候默认导入dayjs
import dayjs from "dayjs";
// 导入常量 团购状态和日期格式
import { GROUPBUY_STATE, DATETIME_FORMAT } from "../../../config";
// 导入获取团购的接口
import { getGroupBuy } from "../../../api/purchase";
// 定义团购列表数据的接口类型
import type { GroupBuyType } from "../../../types";

// 表格列类型
import type { ColumnsType } from "antd/es/table";

const columns: ColumnsType<GroupBuyType> = [
  {
    title: "活动编号",
    dataIndex: "id",
  },
  {
    title: "活动名称",
    dataIndex: "name",
  },
  {
    title: "开始时间",
    dataIndex: "startTime",
    // dayjs(time)转字符串转换为时间
    //  dayjs(time).format格式化时间并输出
    render: (time: string) => dayjs(time).format(DATETIME_FORMAT),
  },
  {
    title: "结束时间",
    dataIndex: "endTime",
    //自定义渲染时间
    render: (time: string) => dayjs(time).format(DATETIME_FORMAT),
  },
  {
    title: "状态",
    dataIndex: "state",
    // state的值为 0 1 2 3  ，数组下标映射
    // 映射为 "待开始","预告中","进行中","已结束","提前结束
    render: (state: number) => GROUPBUY_STATE[state],
  },
  {
    title: "操作",
    render: (row) => (
      <Link to={"/admin/channel/groupBuyDetail/" + row.id}>查看详情</Link>
    ),
  },
];

const baseParams = {
  order: "asc",
  state: "",
  id: "",
  name: "",
  products: "",
  shop: "",
  startTime: "",
  endTime: "",
};

function CommunityPurchase() {
  // 定义分页数据
  const [pagination, setpagination] = useState({ total: 1, current: 1 });
  // 默认的查询参数
  const [params, setParams] = useState<GroupBuyType>(baseParams);
  //  团购列表数据
  const [groupBuyList, setGroupBuyList] = useState<GroupBuyType[]>([]);
  //  定义获取团购的函数
  function getGroup() {
    getGroupBuy({ ...params, current: pagination.current }).then((res) => {
      // 更新团购列表数
      setGroupBuyList(res.data.data);
      var p = res.data.pagination;
      // 更新分页数据
      setpagination({ current: Number(p.current), total: p.total });
      console.log(res.data.data);
    })
  }
  return ( 
    <div>
       <h3>社区团购</h3>
       <Table
        columns={columns}
        dataSource={groupBuyList}
       ></Table>
    </div>
   );
}

export default CommunityPurchase;